<template>
  <div>
    <sticky class-name="sub-navbar white">
      <el-button style="margin:5px 10px;float:left" type="text" icon="el-icon-arrow-left" @click="handleReturn" >返回</el-button>
      <div>
        <el-button :loading="loading" style="margin-left: 10px;" type="primary" @click="handleSave">保存</el-button>
      </div>
    </sticky>

    <div style="margin:10px">
      <el-row >
        <el-col :span="12" :xs="24" :md="12" :lg="8">
          <el-card style="margin:10px">
            <div slot="header" class="clearfix">
              <span>学生信息</span>
            </div>
            <el-form ref="formStudent" :model="form" :rules="rules" label-width="100px" size="mini">
              <el-form-item label="所属项目" prop="projectId">
                <el-select v-model="form.projectId" filterable class="filter-item" style="width:100%">
                  <el-option v-for="item in projects" :key="item.code" :label="item.name" :value="item.code"/>
                </el-select>
              </el-form-item>
              <el-form-item label="登记学期" prop="regSemesterId">
                <el-select v-model="form.regSemesterId" filterable class="filter-item" style="width:100%" >
                  <el-option v-for="item in semesters" :key="item.code" :label="item.name" :value="item.code"/>
                </el-select>
              </el-form-item>
              <el-form-item label="学生姓名" prop="name">
                <el-input v-model="form.name" :max-length="20"/>
              </el-form-item>
              <el-form-item label="学生编号">
                <label>{{ form.sn }}</label>
              </el-form-item>
              <el-form-item label="身份证号" prop="idNumber">
                <el-input v-model="form.idNumber" :max-length="20"/>
              </el-form-item>

              <el-form-item label="登记学校" prop="regSchool">
                <el-input v-model="form.regSchool" :max-length="30"/>
              </el-form-item>
              <el-form-item label="登记年级" prop="regGrade">
                <el-select v-model="form.regGrade" style="width:100%">
                  <el-option v-for="item in grades" :key="item.code" :label="item.name" :value="item.name"/>
                </el-select>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" :xs="24" :md="12" :lg="8">
          <el-card style="margin:10px">
            <div slot="header" class="clearfix">
              <span>银行卡号</span>
            </div>
            <el-form ref="formAccount" :model="form" :rules="rules" label-width="100px" size="mini">
              <el-form-item label="账户名" prop="bankAccountName">
                <el-input v-model="form.bankAccountName" :max-length="30"/>
              </el-form-item>
              <el-form-item label="关系" prop="bankAccountRelation">
                <el-input v-model="form.bankAccountRelation" :max-length="20"/>
              </el-form-item>
              <el-form-item label="银行卡号" prop="bankAccountNumber">
                <el-input v-model="form.bankAccountNumber" :max-length="20"/>
              </el-form-item>
              <el-form-item label="开户行" prop="bankName">
                <el-input v-model="form.bankName" :max-length="30"/>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" :xs="24" :md="12" :lg="8">
          <el-card style="margin:10px">
            <div slot="header" class="clearfix">
              <span>联系方式</span>
            </div>
            <el-form ref="formContact" :model="form" :rules="rules" label-width="100px" size="mini">
              <el-form-item label="电话" prop="contactPhone">
                <el-input v-model="form.contactPhone" :max-length="30"/>
              </el-form-item>
              <el-form-item label="微信" prop="contactWechat">
                <el-input v-model="form.contactWechat" :max-length="30"/>
              </el-form-item>
              <el-form-item label="Email" prop="contactEmail">
                <el-input v-model="form.contactEmail" :max-length="30"/>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>

      <el-row >
        <el-card style="margin:10px">
          <div slot="header" class="clearfix">
            <span>其他联系人</span>
            <el-button style="float: right; padding: 3px 3px" type="text">添加联系人</el-button>
          </div>
          <el-table
            :data="contactsList"
            :border="false"
            :stripe="true"
            size="small">

            <el-table-column label="关系" prop="relation" align="center" width="100px">
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.relation" size="small" />
                </template>
                <span v-else>{{ row.relation }}</span>
              </template>
            </el-table-column>
            <el-table-column label="姓名" prop="name" align="center" min-width="100px" >
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.name" size="small" />
                </template>
                <span v-else>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="类型" prop="type" align="center" width="180px" >
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.type" size="small" />
                </template>
                <span v-else>{{ row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column label="号码" prop="phone" align="center" width="180px" >
              <template slot-scope="{row}">
                <template v-if="row.edit">
                  <el-input v-model="row.phone" size="small" />
                </template>
                <span v-else>{{ row.phone }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="编辑" width="120">
              <template slot-scope="{row}">
                <el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
                  确定
                </el-button>
                <el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
                  取消
                </el-button>
                <el-button v-if="!row.edit" type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-row>
      <el-row>
        <el-card style="margin:10px">
          <div slot="header" class="clearfix">
            <span>学生情况简介</span>
          </div>
          <div>
            <el-form ref="formDescription" :model="form" :rules="rules" size="mini">
              <el-form-item label="" prop="description">
                <el-input v-model="form.description" :maxlength="200" autosize size="small" type="textarea"/>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-row>
      <el-row>
        <el-card style="margin:10px">
          <div slot="header" class="clearfix">
            <span>资助信息</span>
          </div>
          <el-form ref="formPoverty" :model="form" :rules="rules" label-width="100px" size="mini">
            <el-row>
              <el-col :span="12" >
                <el-form-item label="贫困程度" prop="povertyLevel">
                  <el-select v-model="form.povertyLevel" class="filter-item" >
                    <el-option v-for="item in povertyLevels" :key="item.code" :label="item.name" :value="item.code"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" >
                <el-form-item label="建议资助" prop="suggestAmount">
                  <el-input-number v-model="form.suggestAmount" :min="0" :max="100000" :precision="0"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-row>
    </div>

  </div>
</template>

<script>
import { add } from '@/api/students'
import { getProjects, getSemesters, getSchoolYears, getPovertyLevels, getGrades } from '@/api/public'
import waves from '@/directive/waves' // 水波纹指令
import Sticky from '@/components/Sticky'
import { getLines } from '@/utils'

export default {
  name: 'StudentsAdd',
  directives: {
    waves
  },
  components: { Sticky },
  filters: {
  },

  props: {
    // id: {
    //   type: Number,
    //   default: null
    // }
  },
  data() {
    return {
      loading: false,
      projects: [],
      semesters: [],
      schoolYears: [],
      grades: [],
      povertyLevels: [],
      form: {
        projectId: null,
        name: null,
        gender: 'female',
        idNumber: null,
        description: null,
        regSemesterId: null,
        regSchool: null,
        regGrade: null,
        sn: null,
        bankAccountId: null,
        bankAccountName: null,
        bankAccountNumber: null,
        bankAccountRelation: null,
        bankName: null,
        contactPhone: null,
        contactWechat: null,
        contactEmail: null,
        contactOther: null,
        povertyLevel: null,
        suggestAmount: null
      },
      contactsList: [],
      listLoading: true,
      queryInfo: null,

      rules: {
        projectId: [{ required: true, message: '不能为空' }],
        name: [{ required: true, message: '不能为空' }],
        idNumber: [{ required: true, message: '不能为空' }],
        regSemesterId: [{ required: true, message: '不能为空' }],
        regSchool: [{ required: true, message: '不能为空' }],
        regGrade: [{ required: true, message: '不能为空' }],

        bankAccountName: [{ required: true, message: '不能为空' }],
        bankAccountNumber: [{ required: true, message: '不能为空' }],
        bankAccountRelation: [{ required: true, message: '不能为空' }],
        bankName: [{ required: true, message: '不能为空' }],

        povertyLevel: [{ required: true, message: '不能为空' }],
        suggestAmount: [{ required: true, message: '不能为空' }]

      },

      dataBankAccountFormRules: {
        bankAccountName: [{ required: true, message: '不能为空' }],
        bankAccountNumber: [{ required: true, message: '不能为空' }],
        bankAccountRelation: [{ required: true, message: '不能为空' }],
        bankName: [{ required: true, message: '不能为空' }]
      },
      dialogBankAccountFormVisible: false
    }
  },

  computed: {
    headerStyle() {
      // return {
      //   'border': '1px solid #ebeef5',
      //   'border-bottom': '0px solid #ebeef5'
      // }
      return {
        'border': '0px solid #ebeef5',
        'border-bottom': '1px solid #ebeef5'
      }
    }
  },
  watch: {
  },
  created() {
    this.getPublicData()
  },
  methods: {
    handleReturn() {
      this.$emit('backClick')
    },
    getPublicData() {
      this.getProjects()
      this.getSemesters()
      this.getSchoolYears()
      this.getPovertyLevels()
      this.getGrades()
    },
    getGrades() {
      getGrades().then((res) => {
        this.grades = res.data
      })
    },
    getProjects() {
      getProjects().then((res) => {
        this.projects = res.data
      })
    },
    getSemesters() {
      getSemesters().then((res) => {
        this.semesters = res.data
      })
    },
    getSchoolYears() {
      getSchoolYears().then((res) => {
        this.schoolYears = res.data
      })
    },
    getPovertyLevels() {
      getPovertyLevels().then((res) => {
        this.povertyLevels = res.data
      })
    },
    handleSave() {
      this.validateForm().then((valid) => {
        if (valid) {
          add(this.form).then((res) => {
            this.$notify({
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
            this.handleReturn()
          })
        }
      })
    },
    validateForm() {
      return new Promise((resolve, reject) => {
        const nameList = []
        nameList.push('formStudent')
        nameList.push('formAccount')
        nameList.push('formContact')
        nameList.push('formDescription')
        nameList.push('formPoverty')

        const plist = []
        for (const i in nameList) {
          const p = new Promise((resolve, reject) => {
            this.$refs[nameList[i]].validate((valid) => {
              if (valid) {
                resolve()
              } else {
                reject()
              }
            })
          })
          plist.push(p)
        }
        Promise.all(plist).then(() => {
          resolve(true)
        }, () => {
          resolve(false)
        })
      })
    },
    getLines(str) {
      return getLines(str)
    }

  }
}

</script>

<style lang="scss" scoped>

  .datatable-header{
      height: 40px;
      width: 100%;
      background: white;
      padding: 12px 16px;
      /* border: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5; */
      line-height: 1;
      .header-text{
        font-size: 18px;
        font-weight: bold;
        color:#303133;;
      }
  }
</style>

